<template>
	<view class="container">
		<view class="product-list">
			<!--商品列表-->
			<view v-for="(item,index) in goodsList" :key="index" class="pro-item" @tap="goGoodsView(item.goods_id)" >
				<image :src="item.img_logo" class="pro-img" mode="widthFix" />
				<view class="pro-content">
					<view class="pro-tit">{{item.goods_name}}</view>
					<view>
						<view class="pro-price">
							<text class="sale-price">￥{{item.money}}</text>
							<text class="factory-price">${{item.money_gold}}</text>
						</view>
						<view class="pro-pay">{{item.add_time}}</view>
					</view>
				</view>
			</view>
			<!--商品列表-->
		</view>
		<!--加载loadding-->
		<tui-loadmore :visible="loadding" :index="3" type="primary"></tui-loadmore>
		<tui-nomore :visible="!pullUpOn"></tui-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
	import tuiLoadmore from "@/components/thorui/tui-loadmore/tui-loadmore"
	import tuiNomore from "@/components/thorui/tui-nomore/tui-nomore"
	export default {
		components: {
			tuiLoadmore,
			tuiNomore
		},
		data() {
			return {
				
				goodsList: [],
				pageIndex:1,
				pageCount: 0,
				pageTotal: 0,
				
				loadding: false,
				pullUpOn: true,
			}
		},
		methods: {

			//商品的详情页面
			goGoodsView: function(e) {
				uni.navigateTo({
					url: '/pages/goods/view?id=' + e
				})
			},
			
			getGoodsList: function(type) {
				if(type != 'append') this.pageIndex = 1;
				uni.request({
					url: this.$apiUrl + '/api/my-goods/view-list',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
            'shopId': uni.getStorageSync('shopId')
					},
					data: { page_num: this.pageIndex },
					success: (res) => {
						let resData = res.data['data'];
						if(type == 'append') {		//底部分页加载更多
							this.goodsList = this.goodsList.concat(resData['list']);
						}else{
							this.goodsList = resData['list'];
						}
						this.pageCount = resData['pager']['page_total'];
						this.pageTotal = resData['pager']['count'];
					}
				});
			},
		},
		
		
		//页面加载的时候
		onLoad: function(options) {
			this.getGoodsList();
		},
		
		
		//页面相关事件处理函数--监听用户下拉动作
		onPullDownRefresh: function() {
		},

		//页面上拉触底事件的处理函数
		onReachBottom: function() {			
			if (!this.pullUpOn) return;
			this.loadding = true;
			if (this.pageIndex == this.pageCount) {
				this.loadding = false;
				this.pullUpOn = false;
			} else {
				this.pageIndex = this.pageIndex + 1;
				this.getGoodsList('append');
				this.loadding = true;
			//	this.pullUpOn = false;
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.product-list {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 30upx 30upx 0 30upx;
		background: #fff;
	}

	.pro-item {
		background: #fff;
		box-sizing: border-box;
		width: 49%;
		position: relative;
		margin-bottom: 2%;
	}

	.pro-item::after {
		content: '';
		position: absolute;
		height: 200%;
		width: 200%;
		border: 1upx solid #eaeef1;
		transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		left: 0;
		top: 0;
	}

	.pro-img {
		width: 100%;
		display: block;
	}

	.pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20upx;
		height: 230upx;
	}

	.pro-tit {
		/* font-size:  */
		color: #2e2e2e;
		font-size: 26upx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.pro-price {
		padding-top: 18upx;
	}

	.sale-price {
		font-size: 34upx;
		font-weight: 500;
		color: #ea1500;
	}

	.factory-price {
		font-size: 24upx;
		color: #a0a0a0;
		/* text-decoration: line-through; */
		padding-left: 12upx;
	}

	.pro-pay {
		padding-top: 10upx;
		font-size: 24upx;
		color: #656565;
	}
</style>